<template>
    <page-wrapper>
        <a-tabs :activeKey="activeKey" @change="callTabBack">
            <a-tab-pane key="1" tab="偏好设置">
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">换肤设置</span>
                    </div>
                    <div class="config_box">
                        <a-row type="flex">
                            <a-col :span="6">
                                <span class="label">系统主题：</span><a-switch :checked="isAutoTheme" checked-children="自动"
                                    un-checked-children="手动" @change="switchAuto" />
                            </a-col>
                        </a-row>
                        <div class="theme_box flex-row">
                            <div :class="['theme_item flex-column', theme == item.key && 'active']" @click="switchTheme(item)"
                                v-for="item in themeList" :key="item.key">
                                <img class="theme" :src="item.path" />
                                <p class="label">{{ item.themeName }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">布局设置</span>
                    </div>
                    <div class="config_box">
                        <div class="theme_box flex-row">
                            <div :class="['theme_item flex-column', layout == item.key && 'active']" @click="switchLayout(item)"
                                v-for="item in layoutList" :key="item.key">
                                <img class="theme" :src="item.path" />
                                <p class="label">{{ item.name }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="音效设置">
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">消息音效设置</span>
                    </div>
                    <div class="config_box">
                        <a-row type="flex">
                            <a-col :span="6">
                                <span class="label">报警消息：</span><a-switch :checked="warningAudio" checked-children="开"
                                    un-checked-children="关" @change="switchAudio('warningAudio')" />
                            </a-col>
                            <a-col :span="6">
                                <span class="label">任务通知消息：</span><a-switch :checked="taskAudio" checked-children="开"
                                    un-checked-children="关" @change="switchAudio('taskAudio')" />
                            </a-col>
                            <a-col :span="6">
                                <span class="label">一般通知：</span><a-switch :checked="commonAudio" checked-children="开"
                                    un-checked-children="关" @change="switchAudio('commonAudio')" />
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="3" tab="超龄设置">
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">所属区域</span>
                    </div>
                    <div class="config_box">
                        <a-row type="flex">
                            <a-col :span="6">
                                <a-select style="width: 100%;" placeholder="请选择所属区域">
                                    <a-select-option :value="item.deptId" :key="item.deptId" v-for="item in deptList">{{item.deptName}}</a-select-option>
                                </a-select>
                            </a-col>
                        </a-row>
                    </div>
                </div>
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">高速公路类</span>
                    </div>
                    <div class="config_box">
                        <a-row type="flex">
                            <a-col :span="6">
                                <div class="age_item flex-row">
                                    <span class="label">男性年龄限制：</span>
                                    <a-input-number class="flex-item" @blur="updateAge" v-model="form.mage" :min="18" :max="100"/>
                                    <span class="unit">岁</span>
                                </div>
                            </a-col>
                            <a-col :span="6">
                                <div class="age_item flex-row">
                                    <span class="label">女性年龄限制：</span>
                                    <a-input-number class="flex-item" @blur="updateAge" v-model="form.fage" :min="18" :max="100"/>
                                    <span class="unit">岁</span>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </div>
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">地方道路类</span>
                    </div>
                    <div class="config_box">
                        <a-row type="flex">
                            <a-col :span="6">
                                <div class="age_item flex-row">
                                    <span class="label">男性年龄限制：</span>
                                    <a-input-number class="flex-item" @blur="updateAge" v-model="form.mage" :min="18" :max="100"/>
                                    <span class="unit">岁</span>
                                </div>
                            </a-col>
                            <a-col :span="6">
                                <div class="age_item flex-row">
                                    <span class="label">女性年龄限制：</span>
                                    <a-input-number class="flex-item" @blur="updateAge" v-model="form.fage" :min="18" :max="100"/>
                                    <span class="unit">岁</span>
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </a-tab-pane>
            <a-tab-pane key="4" tab="保险设置">
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">定时报送</span>
                    </div>
                    <div class="config_box">
                        <a-row type="flex">
                            <a-col :span="4">
                                <div class="age_item flex-row">
                                    <a-time-picker v-model="insureTime" style="width:100%;" format="HH:mm" valueFormat="HH:mm" />
                                </div>
                            </a-col>
                        </a-row>
                    </div>
                </div>
                <div class="config_block">
                    <div class="block_header flex-row">
                        <a-icon class="activeItem" type="right-circle" theme="filled" />
                        <span class="title">保险公司</span>
                    </div>
                    <div class="config_box">
                        <a-row type="flex">
                            <a-col :span="24">
                                <a-form-model ref="insureForm">
                                    <div class="insure_item flex-row" v-for="(item,index) in insureForm" :key="index">
                                        <a-form-model-item class="insure_name">
                                            <div  class="insure_name flex-row">
                                                <span class="must">*</span>
                                                <a-input class="put" v-model.trim="item.insureCompanyName" placeholder="请输入保险公司名称" />
                                            </div>
                                        </a-form-model-item>
                                        <a-form-model-item class="insure_name">
                                            <div  class="insure_name flex-row">
                                                <span class="must">*</span>
                                                <a-input class="put" v-model.trim="item.insureCompanyMail" placeholder="请输入保险清单接收邮箱" />
                                            </div>
                                        </a-form-model-item>
                                        <a-form-model-item class="insure_name">
                                            <a-input class="put" v-model.trim="item.insureCompanyPhone" placeholder="请输入请输入联系方式" />
                                        </a-form-model-item>
                                        <a-form-model-item class="control flex-row">
                                            <a-icon class="btn reduce_btn" @click="deleteInsure(index)" v-if="insureForm.length>1" type="minus-circle" theme="filled" />
                                            <a-icon class="btn add_btn" @click="addInsure(index)" type="plus-circle" theme="filled" />
                                        </a-form-model-item>
                                    </div>
                                </a-form-model>
                                <a-button type="primary" @click="saveInsure">保存设置</a-button>
                            </a-col>
                        </a-row>
                    </div>
                </div>
            </a-tab-pane>
        </a-tabs>
        
    </page-wrapper>
</template>
<script>
import { mapState } from 'vuex'
import { setCache } from '@/utils/session'
import {updateAgeLimit,remoteAgeLimit} from '@/api/system/user'
import { rules } from './rules'
import { remoteList } from '@/api/system/dept';
import {remoteSystemInsureConfig,updateInsureInfo,updateInsureTime} from '@/api/setting/config'

export default {
    name: "Config",
    inject: ['playAudio', 'closeAudio'],
    computed: {
        ...mapState({
            theme: state => state.setting.theme,
            isAutoTheme: state => state.setting.isAutoTheme,
            layout: state => state.setting.layout,
            warningAudio: state => state.setting.warningAudio,
            taskAudio: state => state.setting.taskAudio,
            commonAudio: state => state.setting.commonAudio,
            userArea: state => state.user.userArea,
            account: state => state.user.accountInfo
        }),
    },
    data() {
        return {
            rules,
            activeKey:'1',
            themeList: [
                {
                    path: require('@/assets/theme/blue.png'),
                    themeName: '经典蓝',
                    key: "blue"
                },
                {
                    path: require('@/assets/theme/dark.png'),
                    themeName: '星空灰',
                    key: "dark"
                },
                {
                    path: require('@/assets/theme/light.png'),
                    themeName: '淡雅白',
                    key: "light"
                }
            ],
            layoutList:[
                {
                    path: require('@/assets/layout/side.png'),
                    name: '侧边栏布局',
                    key: "vertical"
                },
                {
                    path: require('@/assets/layout/top.png'),
                    name: '顶部布局',
                    key: "top"
                },
                {
                    path: require('@/assets/layout/mix.png'),
                    name: '混合布局',
                    key: "horizontal"
                }
            ],
            form:{
                mage:55,
                fage:55
            },
            insureTime:'',
            company:{
                insureCompanyName:'',
                insureCompanyMail:'',
                insureCompanyPhone:''
            },
            insureForm:[
                {
                    ...this.company
                }    
            ],
            deptList:[]
        }
    },
    created() {
        let {type='1'} = this.$route.query;
        this.activeKey = type;
        this.getAgeLimit();
        this.getInsureInfo();
        this.getDeptList();
    },
    methods: {
        //切换tab
        callTabBack(e){
            this.activeKey = e;
        },
        //保存保险公司
        async saveInsure(){
            if(!this.insureTime){
                this.$message.error(`请选择保险单定时报送的时间`)
                return;
            }
            let insureForm = this.insureForm;
            let error = false;
            for(let i=0;i<insureForm.length;i++){
                let item = insureForm[i];
                if(!item.insureCompanyName){
                    error = true;
                    this.$message.error(`第${i+1}条公司名称不能为空`)
                    break;
                }
                let emailExg = /(^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$)/;
                if(!emailExg.test(item.insureCompanyMail)){
                    error = true;
                    this.$message.error(`第${i+1}条接收邮箱有误`)
                    break;
                }
                let phoneExg = /^((\+86|\+86\-)|(86|86\-)|(0086|0086\-))?1[3|5|7|8]\d{9}$/;
                let telExg400 = /^400[0-9]{7}/;
                let telExg800 = /^800[0-9]{7}/;
                let callExg = /0\d{2,3}-\d{7,8}/;

                if(!item.insureCompanyPhone || (
                        phoneExg.test(item.insureCompanyPhone) || 
                        telExg400.test(item.insureCompanyPhone) || 
                        telExg800.test(item.insureCompanyPhone) || 
                        callExg.test(item.insureCompanyPhone))){
                    console.log('联系方式正确')
                }else{
                    error = true;
                    this.$message.error(`第${i+1}条联系方式有误`)
                    break;
                }
            }
            if(error){
                return false;
            }
            try{
                let res1 = await updateInsureTime({time:this.insureTime});
                let res2 = await updateInsureInfo(this.insureForm);
                this.$message.success(`保存成功`)
            }catch(err){
                // this.$message.error(`保存有误，请重试`)
                console.log(err)
            }
        },
        //删除保险公司
        deleteInsure(index){
            this.$confirm({
                title: '提示',
                content: '确定要删除该条信息？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    this.insureForm.splice(index,1)
                },
                onCancel() {}
            });
        },
        //添加保险公司
        addInsure(index){
            this.insureForm.splice(index+1,0,{...this.company})
        },
        //获取保险发送配置信息
        async getInsureInfo(){
            let res = await remoteSystemInsureConfig();
            let {insureCompanys=[],insureSendMailTime={time:''}} = res.data;
            this.insureForm = [...insureCompanys]
            this.insureTime = insureSendMailTime?.time;
        },
        //获取年龄配置
        async getAgeLimit(){
            try{
                let res = await remoteAgeLimit();
                let {data} = res;
                this.form = {...this.form,...data}
            }finally{

            }
        },
        //输入年龄变化
        async updateAge(){
            try{
                let res = await updateAgeLimit(this.form)
                this.$message.success('更新成功')
            }finally{

            }
        },
        //切换主题
        switchTheme(item) {
            if (this.isAutoTheme) {
                return false;
            }
            let { key } = item;
            this.$store.dispatch('setting/changeSetting', {
                key: 'theme',
                value: key,
                cache: 'THEME'
            });
            document.getElementsByTagName('body')[0].className = `vue-antd-admin-${key}Theme`;
        },
        //切换布局
        switchLayout(item){
            let { key } = item;
            this.$store.dispatch('setting/changeSetting', {
                key: 'layout',
                value: key,
                cache: 'LAYOUT'
            });
        },
        //切换自动主题
        switchAuto() {
            setCache('AutoTheme', !this.isAutoTheme);
            this.$store.commit('setting/SETTING_AUTO_THEME')
        },
        //切换音效
        switchAudio(type) {
            this.$store.commit('setting/SETTING_AUDIO', type)
            this.playAudio('', 'realtime', false);
        },
        //根据组织和区域 获取可选组织和区域
        async getDeptList() {
            try {
                let res = await remoteList();
                let deptList = res.data;
                this.deptList = deptList;
            } finally {
            }
        },
    }
}
</script>
<style lang="scss" scoped>
.insure_item{
    align-items: center;
   
    .insure_name{
        margin-right: 10px;
        width: 200px;
        align-items: center;
        .must{
            margin-right: 2px;
            color: #F75444;
        }
        .put{
            flex: 1;
            // width: 100%;
        }
    }
    .control{
        align-items: center;
        .btn{
            margin-left: 10px;
            font-size: 22px;
            &.reduce_btn{
                color: #F75444;
            }
            &.add_btn{
                color: #011D3F;
            }
        }
    }
}
.age_item{
    margin-right:20px;
    align-items:center;
    .unit{
        margin-left:5px;
    }
}
.theme_box {
    margin-top: 30px;
}
.theme_item {
    margin-right: 60px;
    text-align: center;
    cursor: pointer;
    .theme {
        width: 170px;
        height: auto;
        padding: 10px;
        border: 1px solid #D2D2D2;
        border-radius: 6px;
    }
    .label {
        margin-top: 15px;
        font-size: 14px;
        color: #333;
    }
    &.active {
        .theme {
            border: 3px solid #1A80DC;
        }
        .label {
            color: #1A80DC;
        }
    }
}
.config_block {
    margin-bottom: 20px;
    .block_header {
        align-items: center;
        font-size: 14px;
        .activeItem {
            font-size: 16px;
        }
        .title {
            margin-left: 10px;
            color: #333;
        }
    }
    .config_box {
        margin: 20px 0;
    }
}
</style>